/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Dimensions, DeviceEventEmitter} from 'react-native';
import {
  Text,
  View,
  Colors,
  TouchableOpacity,
  Card,
  Image,
  Drawer,
} from 'react-native-ui-lib';
import {difftime} from '@/utils/time';
import {update} from '@/utils/request';
import dayjs from 'dayjs';
import Octicons from 'react-native-vector-icons/Octicons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Entypo from 'react-native-vector-icons/Entypo';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import {useDispatch, useSelector} from 'react-redux';

let ProjectItem = ({item, refreshAsync, curProject, dispatch}) => {
  const Prefix = global.file;
  const isCollected = item?.isCollection !== 0;
  const iconconfig = {
    0: {
      label: '未开始',
      key: '0',
      icon: <Octicons name="dash" size={20} style={{color: '#ea7267'}} />,
    },
    1: {
      label: '进行中',
      key: '1',
      icon: (
        <Entypo name="circular-graph" size={20} style={{color: '#229c9e'}} />
      ),
    },
    2: {
      label: '已完成',
      key: '2',
      icon: <Entypo name="circle" size={20} style={{color: '#3283c6'}} />,
    },
    3: {
      label: '已延期',
      key: '3',
      icon: (
        <MaterialCommunityIcons
          name="timer-off"
          size={22}
          style={{color: 'red'}}
        />
      ),
    },
  };

  return (
    <Drawer
      key={item?.id}
      rightItems={[
        {
          icon: require('../../assets/top.png'),
          text: '置顶',
          background: '#408EFF',
          onPress: async () => {
            let res = await update('/userProject', {
              projectId: item?.id,
              isTop: 1,
            });
            if (res.code === 0) {
              refreshAsync();
            }
          },
        },
        {
          icon: isCollected
            ? require('../../assets/stared.png')
            : require('../../assets/star.png'),
          text: isCollected ? '取消' : '星标',
          background: '#F9CE00',
          onPress: async () => {
            let res = await update('/userProject', {
              projectId: item?.id,
              isCollection: isCollected ? 0 : 1,
            });
            if (res.code === 0) {
              refreshAsync();
            }
          },
        },
      ]}
      leftItem={{
        icon: require('../../assets/cloud.png'),
        text: '云空间',
        background: '#7DC5EB',
        onPress: () => {
          DeviceEventEmitter.emit('toast', {
            message: '暂未开放',
            type: 'success',
          });
        },
      }}
      useNativeAnimations
      style={{marginBottom: 12, borderRadius: 12}}>
      <Card
        flex
        enableShadow={false}
        padding-10
        containerStyle={{
          backgroundColor: Colors.colorCardBg,
          borderLeftWidth: curProject?.id === item?.id ? 2 : 0,
          borderColor: Colors?.primaryColor,
        }}
        onPress={() => {
          dispatch?.({
            type: 'CHANGE_CURPROJECT',
            curProject: curProject?.id === item?.id ? null : item,
          });
        }}>
        <View row>
          {item.logoUrl ? (
            <Image
              source={{
                uri: Prefix + item.logoUrl,
              }}
              errorSource={require('../../assets/logo_default.png')}
              aspectRatio={1}
              style={{
                borderRadius: 8,
                width: 56,
                height: 56,
                borderColor: Colors.colorCardBg,
                overflow: 'hidden',
                backgroundColor: 'transparent',
              }}
            />
          ) : (
            <View
              center
              width={56}
              height={56}
              style={{
                borderRadius: 8,
                backgroundColor: Colors?.backgroundColor,
              }}>
              <Text heading>{item?.projectName?.charAt(0)}</Text>
            </View>
          )}
          <View flex-1 marginL-12>
            <View spread row>
              <Text subheading>{item?.projectName}</Text>
              {iconconfig[item?.status]?.icon}
            </View>
            <View row marginB-2>
              <Text style={{color: '#999', fontSize: 12}}>
                A
                <Text style={{color: Colors.colorTextBase, fontSize: 14}}>
                  {' '}
                  {item?.actualTime}{' '}
                </Text>
                h
              </Text>
              <Text marginH-8 />
              <Text style={{color: '#999', fontSize: 12}}>
                P
                <Text style={{color: Colors.colorTextBase, fontSize: 14}}>
                  {' '}
                  {item?.planTime}{' '}
                </Text>
                h
              </Text>
            </View>
            <View row spread style={{gap: 10}}>
              <Text>
                <Text style={{color: '#999', fontSize: 12}}>PM : </Text>
                {item?.projectUserName}
              </Text>

              <Text>{difftime(dayjs(), dayjs(item?.createTime))}</Text>
            </View>
          </View>
        </View>
      </Card>
    </Drawer>
  );
};

export default ProjectItem;
